<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
		height: 100%;
	}
	
	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}
	
	.layout-nav {
		width: 420px;
		margin: 0 auto;
		margin-right: 20px;
	}
	
	.layout-footer-center {
		text-align: center;
	}
	
</style>
<template>
	<div class="layout">
		<Layout style="height: 100%;">
			<Header>
				<Menu mode="horizontal" theme="dark" active-name="1">
					<div class="layout-logo"></div>
					<div class="layout-nav">
						<MenuItem name="1">
						<Icon type="ios-navigate"></Icon>
						Item 1
						</MenuItem>
						<MenuItem name="2">
						<Icon type="ios-keypad"></Icon>
						Item 2
						</MenuItem>
						<MenuItem name="3">
						<Icon type="ios-analytics"></Icon>
						Item 3
						</MenuItem>
						<MenuItem name="4">
						<Icon type="ios-paper"></Icon>
						Item 4
						</MenuItem>
					</div>
				</Menu>
			</Header>
			<Layout :style="{padding: '0 50px'}">
				<Breadcrumb :style="{margin: '16px 0'}">
					<BreadcrumbItem>Home</BreadcrumbItem>
					<BreadcrumbItem>Components</BreadcrumbItem>
					<BreadcrumbItem>Layout</BreadcrumbItem>
				</Breadcrumb>
				<Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
					<Layout>
						<Sider hide-trigger :style="{background: '#fff'}">
							<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
								<Submenu name="1">
									<template slot="title">
										<Icon type="ios-navigate"></Icon>
										Item 1
									</template>
									<MenuItem name="1-1" draggable="true" id="drag1"  @dragstart.native="drag($event)">Option 1</MenuItem>
									<MenuItem name="1-2" draggable="true" id="drag2"  @dragstart.native="drag($event)">Option 2</MenuItem>
                                    <MenuItem name="1-3 "  draggable="true" id="drag3" @dragstart.native="drag($event)">Option 3</MenuItem>
								</Submenu>
								<Submenu name="2">
									<template slot="title">
										<Icon type="ios-keypad"></Icon>
										Item 2
									</template>
									<MenuItem name="2-1">Option 1</MenuItem>
									<MenuItem name="2-2">Option 2</MenuItem>
								</Submenu>
								<Submenu name="3">
									<template slot="title">
										<Icon type="ios-analytics"></Icon>
										Item 3
									</template>
									<MenuItem name="3-1">Option 1</MenuItem>
									<MenuItem name="3-2">Option 2</MenuItem>
								</Submenu>
							</Menu>
						</Sider>
						
						<Content 
							:style="{padding: '24px', minHeight: '280px', background: '#fff'}" 
							id="div1" @drop.native="drop($event)"
							@dragover.native="allowDrop($event)"
							@click.native='alert($event)'
							>
							
                            <div class="cotent">由用户调整元素尺寸。</div>
                            <div class="cotent">由用户调整元素尺寸。</div>
                            <div class="cotent">由用户调整元素尺寸。</div>
                            <div class="cotent">由用户调整元素尺寸。</div>
                        </Content>
                        <!--<showIndex></showIndex>-->
                        <button></button>
                    </Layout>
                    
                </Content>
                
            </Layout>
            <Footer class=" layout-footer-center ">2011-2016 &copy; TalkingData</Footer>
            
        </Layout>
    </div>
</div>
</template>

<script>
	import showIndex from './showIndex.vue'
    export default {
    	components:{showIndex},
    	data () {
    		return {
    			dom:''
    		}
    	},
    	methods : {
			 drag(ev){
			 	console.log('drag --1')
					ev.dataTransfer.setData("Text",ev.target.id);
				 },
			allowDrop (ev) {
				event.preventDefault();
			},
			drop (ev) {
				console.log('drop ---2')
				ev.preventDefault();
				var data=ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data).cloneNode(true));
			},
			alert(evt){
				console.log(  evt.target)
			}
    	}
    	      
    }
 
</script>